<template>
   <el-dialog v-if="showDialog" :title="$t('message.bindDevice')" v-model="showDialog" class="dialog-bind" :class="[dialog-large-width]">
       <div style="margin:10px 0;">
          <el-button type="primary" v-if="!hasBind" v-on:click="bindSubmit"><i class="el-icon-circle-check el-icon--left"></i>{{$t('message.confirmBind')}}</el-button>
          <el-button v-if="hasBind" type="danger" @click="cancleBindOpreation"><i class="el-icon-circle-cross el-icon--left"></i>{{$t('message.cacleBind')}}</el-button>
          <el-button type="warning" @click="showDialog=false"><i class="el-icon-circle-cross el-icon--left"></i>{{$t('message.cancle')}}</el-button>
       </div>
       <section style="width:50%;float:left;height:calc(100% - 60px);overflow:auto;">
       <section class="tree_list" style="padding-right:5px;height:100%;overflow:auto;">
          <p class="panel_title">{{$t('message.deviceList')}}</p>
          <el-tree :data="bindDevices"  :show-checkbox="true" :props="props" :default-expand-all="true" ref="tree" node-key="Id" @check-change="checkChangeHandle" class="bind-dialog-tree" style="width:100%;height:calc(100% - 60px);overflow: auto"></el-tree>
       </section>
     </section>
       <section style="width:50%;float:left;height:calc(100% - 60px);overflow:auto;">
       <section class="container" style="padding-left:5px;">
           <p class="panel_title">{{$t('message.chooseToBindPlug')}}</p>
           <el-table border style="width:100%;" :data="tableData">
            <el-table-column width="55">
              <template slot-scope="scope">
                 <el-checkbox style="width:55px;" @change="changeHandle(scope.row)" v-model="scope.row.Selected"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column :label="$t('message.number')" align="center" prop="id"></el-table-column>
            <el-table-column :label="$t('message.socketName')" align="center" prop="plug_name"></el-table-column>
            <el-table-column :label="$t('message.plugNumber')" align="center" prop="number"></el-table-column>
          </el-table>
       </section>
     </section>
    </el-dialog>
</template>
<script>
    import $ from 'jquery'
    import {HttpServer,GloabFun}from '../assets/js/common.js'
    
	export default{
		data(){
        return{
          tableData:[],
          selectPlug:null,
          showDialog:false,
          selectedId:'',
          bindPlug:null,
        }
		},
		props:{
			templateObj:{
				type:Object,
				require:true
			},
      props:{
        type:Object,
        require:true
      },
      bindDevices:{
        type:Array,
        require:true
      },
      hasBind:{
        type:Boolean,
        require:true
      }
		},
		methods:{
          bindSubmit(){
          	  if(this.selectPlug){
                var selectNode=this.$refs['tree'].getCheckedNodes();
                this.$emit("bindSubmit",{record_gid:this.templateObj.record_gid,sn:selectNode[0].Sn,pduid:this.selectPlug.pdu_id,plugnumber:this.selectPlug.number});
          	  }else{
          	  	this.$alert(this.$t('message.selectBindPlug'), this.$t('message.warning'), {
                  confirmButtonText: this.$t('message.yes'),
                  type: 'warning'
                });
          	  }
          },
          cancleBindOpreation(){
            //取消绑定
            var obj={};
            obj.sn=this.templateObj.sn;
            obj.pduid=this.bindPlug.PduId;
            obj.pdunumber=this.bindPlug.PlugNumber;
            HttpServer.httpPost.call(this, '/rest/v1/record/Cancle',obj,function(response) {
                  this.showDialog=false;
                  this.$emit("getDatas");
                  this.$message({
                   message: this.$t('message.bindSuccess'),
                   type: 'success'
                 });
            });
          },
          changeHandle(row){
          	 if(row.Selected){
                this.selectPlug=row;
                this.tableData.forEach(function(item){
                    if(item.number!=row.number){
                        item.Selected=false;
                    }
                });
             }else{
                this.selectPlug=null;
             }
          },
          checkChangeHandle(data,ischeck){
            if(ischeck){
               this.clearAllChecked();
               this.$refs['tree'].setChecked(data.Id,true,false);
               if(this.selectedId!=data.Id){
                  this.getSnPlugs(data.Sn);
               }
               this.selectedId=data.Id;
            }else{
              if(this.selectedId===data.Id){
                 this.$refs['tree'].setChecked(data.Id,true,false);
              }
            }
          },
          getSnPlugs(Sn){
             HttpServer.httpGet.call(this, '/rest/v1/record/PduPlugs?sn='+Sn+'&recordGid='+this.templateObj.record_gid,function(response){
                 if(this.bindPlug){
                   response.data.data.forEach(function(item){
                      if(this.bindPlug.Sn===Sn&&this.bindPlug.PduId==item.pdu_id&&this.bindPlug.PlugNumber===item.number){
                         item.Selected=true;
                         this.selectPlug=item;
                      }else{
                        item.Selected=false;
                      }
                   }.bind(this));
                 }else{
                   response.data.data.forEach(function(item){
                      item.Selected=false;
                   });
                 }
                 this.tableData=response.data.data;
                 this.$nextTick(function(){
                  if(this.hasBind){
                     var inputList=$(".container").find(".el-checkbox__input");
                     inputList.addClass("is-disabled");
                     inputList.find("input").prop("disabled","disabled");
                   }
                 });
             },function(response){
                if(response.data.result===1){
                  this.tableData=[];
                }
             });
          },
          clearAllChecked(){
             this.bindDevices.forEach(function(item){
                this.$refs['tree'].setChecked(item.Id,false,false);
             }.bind(this));
          },
          contain(array,id){
            for(var i=0;i<array.length;i++){
               if(array[i]===id){
                 return true
               }
            }
            return false;
          },
          getSnId(array,sn){
             var result=[];
             for(var i=0;i<array.length;i++){
               if(array[i].Sn===sn){
                  result.push(array[i].Id);
                  break;
               }
             }
             return result;
          },
          initDatas(){
            this.$nextTick(function(){
               this.bindPlug=null;
               this.selectPlug=null;
               this.selectedId="";
               this.tableData=[];
               if(this.hasBind){
               var bindIds=this.getSnId(this.bindDevices,this.templateObj.sn);
               this.$refs['tree'].setCheckedKeys(bindIds);
               var inputList=$(".tree_list").find(".el-checkbox__input");
                inputList.addClass("is-disabled");
                inputList.find("input").prop("disabled","disabled");
               //获取Sn下的绑定的插座
               HttpServer.httpGet.call(this, '/rest/v1/hkrecord/'+this.templateObj.record_gid,function(response) {
                  this.bindPlug={
                    Sn:response.data.data.Sn,
                    PduId:response.data.data.PduId,
                    PlugNumber:response.data.data.PlugNumber
                  }
                  this.getSnPlugs(this.templateObj.sn);
               });
              }
            });
        }
		},
    created(){
    }
	}
</script>
  <style lang="less">
     /* .push-dialog-tree{
       input
     } */
     .dialog-bind .el-dialog__body{
        height:480px !important;
        .el-tree-node__content{
          //padding-left:10px !important;
        }
        .el-tree-node__expand-icon{
          margin-left:0px;
        }
     }
     .container{
       .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
           background-color: #20a0ff;
           border-color: #0190fe;
       }
     }
  </style>
<style scoped>
.panel_title{
  margin-left:0px;
}
</style>